<template>
	<div>
		<div id="Banner" @click="handleBannerClick">
		  <img :src="gallaryImgs[0]" class="banner-img">
		  <div class="banner-info">
		  	<div class="banner-title">{{this.sightName}}</div>
		  	<div class="banner-number">
		  	<span class="iconfont banner-icon">&#xe692;</span>
		  	{{this.gallaryImgs.length}}
		  	</div>
		  </div>
		</div>
		<fade>
			<gallary class="gallary" :imgs="gallaryImgs" v-show="showGallary" @close="handleGallaryClose"></gallary>
		</fade>
	</div>
  
  
</template>

<script>
import Gallary from '@/common/gallary/Gallary'
import Fade from '@/common/fade/Fade'
export default {
  name: 'Banner',
  components:{
  	Gallary,
  	Fade
  },
  props:{
  	sightName:String,
  	bannerImg:String,
  	gallaryImgs:Array
  },
  data(){
  	return {
  		showGallary:''
  	}
  },
  methods:{
  	handleBannerClick(){
  		this.showGallary = true;
  	},
  	handleGallaryClose(){
  		this.showGallary = false;
  	}
  }
}
</script>

<style scoped>
#Banner{
	overflow: hidden;
	position: relative;
	height: 0;
	padding-bottom: 50%;
}
.banner-img{
	width: 100%;
}
.banner-info{
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	line-height: .6rem;
	color: #fff;
	background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
}
.banner-title{
	flex: 1;
	font-size: .32rem;
	padding: 0 .2rem;
}
.banner-number{
	margin-top: .14rem;
	padding: 0 .4rem;
	line-height: .32rem;
	height: .32rem;
	border-radius: .2rem;
	background: rgba(0,0,0,.8);
	font-size: .24rem;
}
.banner-icon{
	font-size: .24rem;
}
.gallary{
	color: #333;
}
</style>